<template>
  <div v-if="false" id="result-page" class="mobile-end bg-gray pt-10" flex="~ col ">
    <div flex="grow" class="bg-dark px-4">
      <n-carousel
        :space-between="16"
        :loop="false"
        :show-arrow="false"
        :show-dots="false"
        centeredSlides
        v-model:current-index="curIndex"
        @update-current-index="onPageChange"
      >
      <!-- <Vue3Lottie v-for="item in mockData" width="60%" :animation-data="CompositeLoading" /> -->
        <n-image
          v-for="item in mockData"
          :key="item.id"
          :src="item.url"
          :show-toolbar="false"
          object-fit="contain"
          :width="`100%`"
          class="rd-4 h-full"
          flex="~ col justify-center"
        />
      </n-carousel>
    </div>
    <div
      class="w-full h10 my-4 overflow-x-auto whitespace-nowrap"
      flex="~ justify-center items-center gap-1"
    >
      <div
        v-for="(item, i) in mockData"
        :key="item.id"
        class="aspect-ratio-1 bg-purple rd-2 relative w10"
        flex="~ justify-center items-center basis-10 shrink-0"
        @click="handleNavigate(i)"
      >
        <div
          v-show="i === curIndex"
          class="h-full w-full absolute top-0 left-0 rd-2"
          b="~ 2 solid primary"
        ></div>
      <Vue3Lottie :animation-data="CompositeLoading" />
      </div>
    </div>
  </div>
  <DrawWaiting :progress="progress" :in-queue="inQueue" :remaining-s="remainingS" v-else />
</template>

<script setup lang="ts">
import { Vue3Lottie } from 'vue3-lottie'
import CompositeLoading from '@/assets/anims/composite_loading.json'
import example1 from '@/assets/images/example1.png'
import example2 from '@/assets/images/example2.webp'
import { NImage, NCarousel } from 'naive-ui'
import type { DrawParams } from '@/service/types'
import DrawWaiting from '@/views/draw-waiting.vue'
import useDrawable from './useDrawable'
const drawData = history.state.drawData
console.log('result page',typeof drawData,drawData)
const {loading, drawResult} = useDrawable(drawData)
const curIndex = ref(0)
const mockData = [
  { id: '1', url: example1 },
  { id: '2', url: example2 },
  { id: '3', url: example1 },
  { id: '4', url: example2 }
]

const onPageChange = (index: number) => {}
const handleNavigate = (index: number) => {
  curIndex.value = index
}

const progress = ref(0.05)
const inQueue = ref(0)
const remainingS = ref(0)
</script>

<style scoped></style>
